body {
  font-family: sans-serif;
  background-color: white;
  background-image: url("../img/body.jpg");
  background-size: 120%;
}

/* div */
#app {
  width: 1300px;
  height: 900px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-30%, -30%);
  /* text-align: center; */
}

#backofback {
  width: 800px;
  height: 1000px;
  /* position: absolute; */
}

.back {
  /* width: 800px; */
  /* height: 1000px; */
  /* position: absolute; */
  /* background: orange; */
  /* top: 100px; */
  text-align: center;
}

/* ==================================canvas ============================= */
/* canvas */
#backofpage {
  visibility: hidden;
  position: absolute;
  /* border: thick inset yellow; */
  padding: 20px;
  /* margin: 10px; */
  width: 530px;
  height: 320px;
  display: block;
  margin: 80px;
  background-image: url("../img/xiangkuang.jpg");
  background-size: 85%;
}

#background_canvas {
  /* visibility: hidden; */
  /* background-color: white; */
  /* border: thick inset yellow; */
  /* padding: 15px; */
  /* margin: 10px; */
  /* padding-left: auto;
  padding-right: auto; */
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  /* padding: auto; */
  /* border: thick inset yellow; */
  /* padding: 15px; */
  box-shadow: 0 0 0 10px #ff9595,
    0 0 0 20px white,
    30px 30px #32e0c4,
    -30px -30px #32e0c4;
}

#page {
  /* visibility: hidden; */
  position: absolute;
  /* border: 1px solid #eeeeee; */
  background-color: white;
  border: thick inset yellow;
  padding: 4px;
  padding-bottom: 10px;
  margin: 100px;
  /* display: ; */
  top: -70px;
  left: 60px;
  padding: auto;
  /* background-image: url("../img/background.jpg"); */
  background-size: 100%;
  position: absolute;
  /* background-color: black; */
  border: 6px solid white;
  box-shadow: 1px 1px 5px #333333;


}

#hiddencanvas {
  visibility: hidden;
  position: absolute;
  /* border: 1px solid #eeeeee; */
  /* background-color: white; */
  border: thick inset yellow;
  padding: 15px;
  margin: 100px;
  /* display: ; */
  top: -70px;
  left: 60px;
  padding: auto;
  /* background-image: url("../img/background.jpg"); */
  background-size: 100%;
  position: absolute;
  /* background-color: black; */
  border: 6px solid white;
  box-shadow: 1px 1px 5px #333333;
}

button {
  width: 200px;
  /*设置按钮宽度*/
  height: 30px;
  /*设置按钮高度*/
  color: white;
  /*字体颜色*/
  background-color: cornflowerblue;
  /*按钮背景颜色*/
  border-radius: 5px;
  /*让按钮变得圆滑一点*/
  border-width: 0;
  /*消去按钮丑的边框*/
  margin: 0;
  outline: none;
  /*取消轮廓*/
  font-family: KaiTi;
  /*字体设置为楷体*/
  font-size: 17px;
  /*设置字体大小*/
  text-align: center;
  /*字体居中*/
  cursor: pointer;
  /*设置鼠标箭头手势*/
}

button:hover {
  /*鼠标移动时的颜色变化*/
  background-color: antiquewhite;
}

.start_button {
  text-align: center;
}

div {
  height: 60px;
  width: auto;
}

.video {
  width: 1300px;
  height: 900px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-30%, -30%);
  /* text-align: center; */
}

#video {
  position: absolute;
  left: 0px;
  padding: auto;
  /* padding: 15px; */
  box-shadow: 0 0 0 10px #ff9595,
    0 0 0 20px white,
    30px 30px #32e0c4,
    -30px -30px #32e0c4;
}